<template>
  <div class="my-page">
    <div class="my-top">
      <div>
        <h2>我的昵称</h2>
        <p>开启美好的每一天</p>
      </div>
      <img src="../../assets/images/我的.png" alt />
    </div>
    <div class="my-bottom">
      <div class="shopCar">
        <p v-for="(item,index) in cardArr" :key="index">
          <span>
            <img :src="item.icon" alt="">
            <span>{{item.name}}</span>
          </span>
          <span>
            {{item.msg}}
          </span>
        </p>
      </div>
    </div>
    <div class="my-order">
      <p class="order-title">
        <span>
          我的订单
        </span>
        <span class="order-all">
          查看全部 &gt;
        </span>
      </p>
      <div class="order-item">
        <p v-for="(item,index) in orderArr" :key="index">
        <img :src="item.icon" alt="">
        <span>{{item.name}}</span>
      </p>
      </div>
    </div>
  </div>
</template>  

<script>
import { mapState } from "vuex";
export default {
  name: "My",
  data(){
    return{
      cardArr:[
        {
          icon:require("../../assets/images/我的.png"),
          name:'我的优惠券',
          msg:'8张未使用'
        },
        {
          icon:require("../../assets/images/我的.png"),
          name:'资质规则',
          msg:''
        },
        {
          icon:require("../../assets/images/我的.png"),
          name:'联系客服',
          msg:'400-123-123'
        }
      ],
      orderArr:[
        {
          icon:require("../../assets/images/我的.png"),
          name:'待付款',
        },
        {
          icon:require("../../assets/images/我的.png"),
          name:'待配送',
        },
        {
          icon:require("../../assets/images/我的.png"),
          name:'已发货',
        },
        {
          icon:require("../../assets/images/我的.png"),
          name:'退款/售后',
        },
      ]
    }
  },
  computed: {
    ...mapState("user", ["info"])
  }
};
</script>

<style lang="scss" scoped>
.my-page {
  position: relative;
  @include wh(100%, 100%);
  background:rgba(248,248,248,1);
  & > .my-top {
    @include wh(100%, 350px);
    @include flex(row, space-between, center);
    background: #FE3113;
    color: #fff;
    padding: 0 30px;
    & > div {
      & > h2 {
        width: 160px;
        height: 56px;
        font-size: 40px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 56px;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 1);
        line-height: 50px;
      }
      & > p {
        width:192px;
        height:30px;
        font-size:24px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:30px;
        line-height: 50px;
      }
    }
    & > img {
      @include wh(100px, 100px);
      padding-right: 30px;
    }
  }
  &>.my-bottom{
    @include flex(row, center, center);
    margin-top: 300px;
    &>.shopCar{
      @include wh(690px, 342px);
      font-size: $font-size-s;
      background:rgba(255,255,255,1);
      border-radius:12px;
      border:1px solid rgba(240,240,240,1); 
      &>p{
        @include flex(row, space-between, center);
        font-size:28px;
        padding:0 30px;
        line-height: 80px;
        &>span:nth-child(1){
          @include flex(row, center, center);
          img{
            @include wh(50px, 50px);
          }
        }
      }
      }
  }
  &>.my-order{
    position: absolute;
    @include wh(690px, 300px);
    background:rgba(255,255,255,1);
    top: 300px;
    left: 20px;
    box-shadow:0px 33px 20px -20px rgba(0,0,0,0.11),0px 0px 17px -3px rgba(0,0,0,0.06);
    border-radius:12px;
    border:1px solid rgba(240,240,240,1);
    .order-title{
      font-size: 28px;
      display: flex;
      justify-content: space-between;
      padding:0px 20px;
      .order-all{
        color: gray;
      }
    }
    .order-item{
      font-size:24px;
      @include flex(row,space-around,center);
      img{
        @include wh(100px, 100px);
      }
      p{
        @include flex(column,center,center);
      }
    }
  }
}
</style>